/**
 * Created by DengYun on 2017/2/25.
 */

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './Modal.less';

export function showModal(jsx) {
  const el = document.createElement('div');
  document.body.appendChild(el);
  el.className = `${styles.container} ${styles.hidden}`;

  let doDismiss = function() {
    el.className = `${styles.container} ${styles.hidden}`;
    setTimeout(() => {
      el.parentNode.removeChild(el);
    }, 500);
    doDismiss = null;
  }
  const dismiss = () => doDismiss && doDismiss();
  el.addEventListener('click', (e)=> e.target === el && dismiss());

  setTimeout(()=>{
    el.className = styles.container;
  }, 10);

  ReactDOM.render(
    React.cloneElement(jsx, {
      dismiss,
    }),
    el
  );
  return dismiss;
}
